<template>
  <div class="shop-change-warpper">
    <!-- 全部商品（此处暂不封装组件） -->
    <div class="all-shop-warpper">
      <el-tabs>
        <el-tab-pane
          v-for="(item, index) in shopChangeArr"
          :key="index"
          :label="item.label"
        >
          <div v-if="item.label === '全部商品'">
            <el-form
              ref="ruleform"
              :inline="true"
              :model="form"
              :rules="rules"
              class="demo-form-inline"
            >
              <el-form-item label="商品ID" prop="shopId">
                <el-input
                  v-model="form.shopId"
                  placeholder="请输入商品ID"
                />
              </el-form-item>
              <el-form-item label="商品编码" prop="shopCode">
                <el-input
                  v-model="form.shopCode"
                  placeholder="请输入商品编码"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleform')">提交</el-button>
                <el-button @click="resetForm('ruleform')">重置</el-button>
              </el-form-item>
            </el-form>

            <el-table :data="tableData" :header-cell-style="{ background: '#F7F8FA' }" border style="width: 1160px; max-width: 100%;">
              <el-table-column label="商品信息" width="400">
                <template slot-scope="scope">
                  <p>{{ scope.row.shopTitle }}</p>
                  <p>
                    ID：<span style="color: #4E78EF;">{{ scope.row.shopId }}</span>
                    <el-link type="primary" style="margin-left: 4px;" @click="copy(scope.row.shopId)">
                      <i class="el-icon-copy-document" />
                      复制
                    </el-link>
                  </p>
                  <p>编码/货号：{{ scope.row.shopCode }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="price" label="价格" width="150" />
              <el-table-column prop="sku" label="SKU" width="100" />
              <el-table-column prop="stock" label="库存" width="150" />
              <el-table-column prop="state" label="状态" width="100" />
              <el-table-column prop="isPreSale" label="是否预售" width="100" />
              <el-table-column fixed="right" label="操作" min-width="150">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="handleShopChangeLine(scope.row)"
                  >裂变</el-button>
                  <el-button type="text" size="small" @click="handleShopChangeRecord(scope.row)">裂变记录</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="all-shop-pagina">
      <el-pagination
        background
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 封装的组件 -->
    <div>
      <!-- 裂变流程 -->
      <shop-change-line
        :shop-change-line="shopChangeLine"
        @stepThreeClick="handleShopChangeRecord"
      />
      <!-- 裂变记录 -->
      <shop-change-record
        :shop-change-record="shopChangeRecord"
      />
    </div>
  </div>
</template>

<script>
import ShopChangeLine from './components/shop-change-line.vue'
import ShopChangeRecord from './components/shop-change-record.vue'
import { copyTool } from '../../utils/tool'
export default {
  components: { ShopChangeLine, ShopChangeRecord },
  data() {
    return {
      form: {
        user: '',
        region: ''
      },
      rules: {
        shopId: [
          { required: true, message: '请输入商品ID', trigger: 'blur' }
        ]
      },
      stateArr: [
        {
          label: '预售',
          value: 0
        },
        {
          label: '上架',
          value: 1
        },
        {
          label: '下架',
          value: 2
        }
      ],
      preSale: [
        {
          label: '非预售',
          value: 0
        },
        {
          label: '预售',
          value: 1
        }
      ],
      tableData: [],
      shopChangeArr: [
        {
          label: '全部商品',
          title: '软件使用指南',
          content: [
            {
              text: '内容',
              type: 'text'
            }
          ]
        },
        {
          label: '在售商品',
          title: '标题标题标题',
          content: [
            {
              text: '内容2222222222222',
              type: 'text'
            }
          ]
        },
        {
          label: '整店复制',
          title: '标题标题标题',
          content: [
            {
              text: '内容2222222222222',
              type: 'text'
            }
          ]
        }
      ],
      // 裂变流程（表格数据点击"裂变"，则进入裂变流程。隐藏表格等，开始裂变流程）
      shopChangeLine: {},
      // 裂变流程
      shopChangeRecord: {}
    }
  },
  created() {
    const result = {
      shopList: [
        {
          shopId: '20570221855899',
          shopTitle: '内蒙古手撕风干牛肉干 散装特干香辣肉干厂',
          shopCode: 'ZN-VCM501A',
          price: '￥18-29',
          sku: 26,
          stock: 29000,
          state: 0,
          isPreSale: 0
        },
        {
          shopId: '20570221855822',
          shopTitle: '内蒙古手撕风干牛肉干 散装特干香辣肉干厂',
          shopCode: 'ZN-VCM501A',
          price: '￥18332-292324',
          sku: 26,
          stock: 290001233,
          state: 1,
          isPreSale: 1
        },
        {
          shopId: '20570221855833',
          shopTitle: '内蒙古手撕风干牛肉干 散装特干香辣肉干厂',
          shopCode: 'ZN-VCM501A',
          price: '24429',
          sku: 26,
          stock: 29000,
          state: 2,
          isPreSale: 0
        }
      ]
    }
    this.tableData = result.shopList.map(item => ({
      ...item,
      state: item.state ? this.stateArr[item.state].label : '—',
      isPreSale: item.isPreSale ? this.preSale[item.isPreSale].label : '—'
    }))
  },
  methods: {
    copy(val) {
      if (val) {
        copyTool(val)
        this.$message({ message: '复制成功', type: 'success' })
      } else {
        this.$message({ message: '无内容可复制', type: 'error' })
      }
    },
    submitForm(formName) {
      this.$refs[formName][0].validate((valid) => {
        if (valid) {
          // 调用查询接口
          console.log(this.form)
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName][0].resetFields()
    },
    // 裂变
    handleShopChangeLine(row) {
      this.shopChangeLine = {
        ...row,
        isShow: true
      }
    },
    // 裂变记录
    handleShopChangeRecord(row) {
      this.shopChangeRecord = {
        ...row,
        isShow: true
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-change-warpper {
  padding: 12px 20px 0;
  .all-shop-warpper,
  .all-shop-pagina {
    padding: 0 20px;
    background: #fff;
    border-radius: 4px;
  }
  .all-shop-warpper {
    padding-bottom: 20px;
  }
  .all-shop-pagina {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    height: 64px;
    ::v-deep {
      .el-pagination.is-background {
        .el-pager li {
          background-color: #fff;
          border: 1px solid rgba(0,0,0,0.15);
          &:not(.disabled).active {
            color: #fff;
            background-color: #1890ff;
            border: none;
          }
        }
      }
      .btn-prev,
      .btn-next {
          background-color: #fff;
          border: 1px solid rgba(0,0,0,0.15);
      }
    }
  }
}
</style>
